<!--
  Generated template for the QAndAPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color={{resultColors[item?.itemID]}}>
    <ion-buttons start hideWhen="ios">
      <button ion-button icon-only *ngIf="!start" (click)="PreviousQAndA()">
         <ion-icon ios="ios-arrow-back" md="ios-arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title >第{{index}}题</ion-title>
    <ion-buttons end hideWhen="ios">
      <button ion-button icon-only *ngIf="!end" (click)="loadQAndA()">
          <ion-icon ios="ios-arrow-forward" md="ios-arrow-forward"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>
</ion-header>


<ion-content (swipe)="swipeToChangeItem($event)">

  <ion-fab right bottom >
    <button ion-fab color="primary"><ion-icon name="add"></ion-icon></button>
    <ion-fab-list side="top">
      <button ion-fab [color]="isCollected?'danger':'primary'" (click)="toggleCollect()">
        <ion-icon name="star" color='light'></ion-icon>
      </button>
      <button ion-fab [disabled]="qstmode" [color]="qstmode?'light':'primary'" (click)="reloadQAndA()">
          <ion-icon name="refresh"></ion-icon>
      </button>
      <button ion-fab [disabled]="qstmode" [color]="qstmode?'light':'primary'" (click)="toggleAnswer()">
          <ion-icon name="eye" *ngIf="answershow"></ion-icon>
          <ion-icon name="eye-off" *ngIf="!answershow"></ion-icon>
      </button>
    </ion-fab-list>
    <ion-fab-list side="left">
      <button ion-fab [disabled]="!qstmode" [color]="qstmode?'primary':'light'" (click)="(makechoice(3))">D</button>
      <button ion-fab [disabled]="!qstmode" [color]="qstmode?'primary':'light'"  (click)="(makechoice(2))">C</button>
      <button ion-fab [disabled]="!qstmode" [color]="qstmode?'primary':'light'"  (click)="(makechoice(1))">B</button>
      <button ion-fab [disabled]="!qstmode" [color]="qstmode?'primary':'light'"  (click)="(makechoice(0))">A</button>
    </ion-fab-list>
  </ion-fab>


  <!--答题页面-->
  <div *ngIf="qstmode">
    <div *ngFor="let myitem of items;let j = index">
      <div *ngIf="j===index-1" class="animated fadeIn">
        <ion-card class="question" >
          <ion-card-content>
            {{item.itemContent}}
          </ion-card-content>
        </ion-card>
        <ion-card *ngFor="let opt of myitem?.itemOptions;let i = index" (click)="(makechoice(i))" class="option">
          <ion-card-content>
            <p>{{opt}} </p>
          </ion-card-content>
        </ion-card>
      </div>
      </div>
  </div>



  <!--答案显示页面-->
  <div *ngIf="!qstmode">
    <!--<ion-card *ngIf="result" class="answer-right">-->
      <!--<ion-card-content text-center  class="result">-->
        <!-- Add card content here! -->
        <!--<ion-icon name="thumbs-up"></ion-icon>-->
        <!--正确-->
      <!--</ion-card-content>-->
    <!--</ion-card>-->
    <ion-card *ngIf="answershow" color={{resultColors[item?.itemID]}}>
      <ion-card-content text-center>
        <!-- Add card content here! -->
         <!--<ion-icon name="thumbs-down"></ion-icon>-->
        <!--错误-->
        <!--<br>-->
        <span >正确答案:{{item?.itemAnswer}}</span>
      </ion-card-content>
    </ion-card>
    <ion-card *ngIf="item?.answerAnalysis">
      <ion-card-header>
        答案解析
      </ion-card-header>
      <ion-card-content>
        <pre>{{item?.answerAnalysis}}</pre>
      </ion-card-content>
    </ion-card>
    <ion-card *ngIf="item?.relevantContent">
      <ion-card-header>
        相关知识点
      </ion-card-header>
      <ion-card-content>
        {{item?.relevantContent}}
      </ion-card-content>
    </ion-card>
    <!--<div text-center>
      <button ion-button (click)="reloadQAndA()">重做</button>
      <button ion-button (click)="toggleAnswer()">正确答案开关</button>
      <button *ngIf="end" ion-button (click)="finishClick()" color="secondary">完成</button>
    </div>-->
  </div>
</ion-content>
